<template>
    <div class="user">
        <!-- 背景开始 -->
        <div class="back"></div>
        <!-- 背景开始 -->
        <!-- 内容开始 -->
         <div class="product">
             <div class="photo" >
                 <img width="100%" height="100%"  src="http://121.199.29.84:8888/group1/M00/00/22/rBD-SWCvayiAFxbEAACkVLvvWi0588.jpg" alt="">
             </div>
             <div class="name">admin1</div>
         </div>
         <div class="account">
             <div class="abbr">
                 <div class="one">账户余额</div>
                 <div class="two">5202.5</div>
             </div>
            <van-button color="#7232dd" class="money"  @click="tanHandler">充值
            </van-button>
         </div>
        <!-- 内容结束 -->
        <!-- 地址开始 -->
        <div class="add">
            <div class="address"  @click="changHandler">
                <div class="iconfont icon-dizhi">常用地址</div>
                <div class="ree">&gt;</div>
            </div>
            <div class="our">
                <div class="iconfont icon-lianxi">联系我们</div>
                <div class="re">&gt;</div>
            </div>
        </div>
        <!-- 地址结束 -->
        <!-- 退出登录开始 -->
        <div class="exit" @click="exitHandler">退出登录</div>
        <!-- 退出登录结束 -->
        <!-- 弹出层开始 -->
        <van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }" class="chon" height="20%">
            <div class="chong">充值</div>
            <van-cell-group class="qing">
                <van-field v-model="value" label="充值金额" placeholder="请输入充值金额" />
            </van-cell-group>
            <van-button type="primary" class="ti">提交</van-button>
        </van-popup>
        <!-- 弹出层结束 -->
        <!-- 弹窗框开始 -->
            <!-- <van-dialog v-model="sho" title="是否退出登录" show-cancel-button></van-dialog> -->
        <!-- 弹窗框结束 -->
    </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
    data(){
        return{
         show:false,
         sho:false,
         value:''
        }
    },
    methods:{
    tanHandler(){
    //    alert(999)
    this.show=true
      },
      changHandler(){
        //   alert(999)
          this.$router.push({path:'/manager/address'})
      },
      exitHandler(){
        Dialog.confirm({
            title: '是否退出登录',
            })
            .then(() => {
                this.$router.push({path:'/login'})
            })
            .catch(() => {
                //  on cancel
            });
      }
    },
    created(){
    }
}
</script>
<style scoped>
.user .back{
    height: 180px;
    background-image: linear-gradient(90deg,#7579ff,#bf73ff);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
.user .product{
    height: 170px;
    width: 80%;
    background-color: #fff;
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .8;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
    padding: 0 1em;
}
.user .product .photo{
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #bf73ff;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
}
.user .product .photo img{
    border-radius: 50%;

}
.user .product .name{
    width: 50%;
    margin: 0 auto;
    margin-top: 3.5em;
    text-align: center;
}
.user  .account{
    height: 70px;
    width: 75%;
    margin:0 auto;
    text-align: center;
}
.user  .account .abbr{
    float: left;
   margin-top: 10px;
}
.user  .account .abbr .one{
    font-size: 16px;
    color: rgb(19, 17, 17);
    margin-bottom: 5px;
    cursor: pointer;
}
.user .account .abbr .two{
    color: #0b13f1;
    font-size: 22px;
    cursor: pointer;
}
.user  .account .money{
    width: 21%;
    height: 42px;
    margin-top: 22px;
    float: right;
    background-color: #bf73ff;
    border-radius: 999px;
    font-size: 14px;
    color: #fff;
    line-height: 42px;
    cursor: pointer;
}
.user .chon .chong{
    font-size: 16px;
    margin-top: 47px;
}
.user .chon .qing{
    margin-top: 36px;
}
.user .chon .ti{
color: white;
background: rgb(120, 121, 255) none repeat scroll 0% 0%;
border-color: rgb(120, 121, 255);
border-radius: 999px;
padding: 0 15px;
font-size: 14px;
width: 100%;
margin-top: 40px;
}
.user .add{
    width: 95%;
    height: 90px;
    box-shadow: 4px 4px 4px 0 rgba(158,117,255,.2);
     margin:130px auto;
     border-radius: 5px;
     line-height: 90px;
     transition: .3s;
     text-align: left;
    
}
.user .add .address{
    height: 43px;
    font-size: 20px;
    line-height: 43px;
      cursor: pointer;
}

.user .add .address div:first-child{
    float: left;
}
.user .add .address .ree{
    float: right;
    color: #ccc;
    margin-right: 28px;
}
.user .add .our{
    height: 43px;
    font-size: 20px;
    line-height: 43px;
    cursor: pointer;
}
.user .add .our div:first-child{
    float: left;
}
.user .add .our .re{
     float: right;
    margin-right: 28px;
    color: #ccc;
}
.user .exit{
    width: 53%;
    height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 22px;
    background-image: linear-gradient(90deg,#7579ff,#bf73ff);
    font-size: 14px;
    cursor: pointer;
    margin:0 auto;
    line-height: 40px;
}
</style>